<template>
    <div v-if="$store.state.psvUrl" >
        <div class="psvViewerClose" @click="closeViewer">
            关闭
        </div>
        <div id="viewer"></div>
    </div>
    
</template>

<script>
//全景工具引入
import {Viewer} from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
import { nextTick, onMounted,watch } from 'vue';
import { useStore} from 'vuex'
export default {
    setup() {
        const store = useStore();
        let psvViewer = null;
        watch(()=> store.state.psvUrl, (newVlaue)=>{
            console.log(newVlaue)
            nextTick(()=>{
                psvViewer = new Viewer({
                    container: document.querySelector('#viewer'),
                    panorama: newVlaue
                });
            })

        })
        onMounted(()=>{
            
        })
        const closeViewer = ()=>{
            psvViewer.destroy()
            psvViewer = null
            store.commit("changePsvUrl",null)
        }
        return{
            closeViewer
        }
    }
}
</script>
<style  scoped>
    .psvViewerClose{
        position:absolute;
        width:100px;
        height:50px;
        z-index:2031;
        right:0;
        top:20px;
        font-size:30px;
        color:#19F1F9;
        text-align:center;
        cursor:pointer;
    }
    #viewer{
        position:absolute;
        width:100vw;
        height:100vh;
        z-index:2030;
        left:0;
        top:0;
        background:#000;
    }
</style>